﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src="~/js/frame.js"></script>
    <style>
        .themeitem {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            cursor: pointer
        }

        .themeactive {
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="framecontainer">
        <div class="formrow">
            <div style="display:flex;flex-direction:row;align-items:center;height:100%;width:100%;margin-bottom:40px" id="ThemeContent">
            </div>
        </div>
        <div class="formbtnop">
            <button class="btn btn-primary cloudbtn" type="button" onclick="Save()"><span class="btntext">保 存</span></button>
            <button class="btn cloudbtn" type="button" onclick="Close()"><span class="btntext">关 闭</span></button>
        </div>
    </div>
    <script>
        var NowTheme = GetSystemTheme();
        $(function () {
            BindGrid();
        })
        function BindGrid() {
            CloudPost({}, GetRootPath() + "frame/extend/theme/opsettinglist", function (res) {
                if (res.code == 0) {
                    var Content = "";
                    $(res.data).each(function (index, RowData) {
                        if (NowTheme == null) {
                            if (RowData.ThemeTag == 'base') {
                                var text = "";
                                text += " 			   <div class=\"themeitem themeactive\" tag='" + RowData.ThemeTag + "'>";
                                text += "                    <div style='width:30px;height:30px;background-color:" + RowData.ThemeColor + "'></div>";
                                text += "                    <div>" + RowData.ThemeName + "</div>";
                                text += "                </div>";
                                Content += text;
                            } else {
                                var text = "";
                                text += " 			   <div class=\"themeitem\"  tag='" + RowData.ThemeTag + "'>";
                                text += "                    <div style='width:30px;height:30px;background-color:" + RowData.ThemeColor + "'></div>";
                                text += "                    <div>" + RowData.ThemeName + "</div>";
                                text += "                </div>";
                                Content += text;
                            }
                        } else {
                            if (RowData.ThemeTag == NowTheme) {
                                var text = "";
                                text += " 			   <div class=\"themeitem themeactive\"  tag='" + RowData.ThemeTag + "'>";
                                text += "                    <div style='width:30px;height:30px;background-color:" + RowData.ThemeColor + "'></div>";
                                text += "                    <div>" + RowData.ThemeName + "</div>";
                                text += "                </div>";
                                Content += text;
                            } else {
                                var text = "";
                                text += " 			   <div class=\"themeitem\"  tag='" + RowData.ThemeTag + "'>";
                                text += "                    <div style='width:30px;height:30px;background-color:" + RowData.ThemeColor + "'></div>";
                                text += "                    <div>" + RowData.ThemeName + "</div>";
                                text += "                </div>";
                                Content += text;
                            }
                        }

                    })
                    $("#ThemeContent").html(Content);
                    BindThemeChangeClick();
                }
            })
        }

        function BindThemeChangeClick() {
            $(".themeitem").each(function () {
                $(this).click(function () {
                    $(".themeitem").removeClass("themeactive");
                    $(this).addClass("themeactive");
                })
            })
        }

        function GetThemeColorSpan(RowData) {
            return "<div style='width:30px;height:30px;background-color:" + RowData.ThemeColor + "'></div>";
        }

        function Close() {
            CloseDialog();
        }

        function Save() {
            SetLocalData("Theme", $($(".themeactive")[0]).attr("tag"));
            CloseDialog("OK");
        }
    </script>
</body>
</html>
